<script setup lang="ts">
import { reactive } from 'vue'

import { useUserStore } from '@/store/user.ts'
const user = useUserStore()
// do not use same name with ref
const form = reactive({
  username: '',
  password: '',
})

const onSubmit = () => {
  user.setUsername(form.username)
}
</script>
    
<template>
  <el-container>
    <el-form :model="form" label-width="auto" style="max-width: 250px">
        <el-form-item label="用户账号:">
          <el-input v-model="form.username" />
        </el-form-item>
        <el-form-item label="密码:">
          <el-input v-model="form.password" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">登录</el-button>
        </el-form-item>
      </el-form>
    </el-container>
</template>
    
<style scoped>
  .el-form{
    margin-top: 400px;
    margin-left: 800px;
  }
</style> 
